<template>
    <div>
        <flexbox class="sports" :gutter="0" wrap="wrap">
            <flexbox-item :span="1/3" v-for="sport in sports" class="sport" :class="sport.type">
                <img src="http://dummyimage.com/50x50/fff/79aaf2.png&text=O" alt="">
                <div class="sport-name">{{sport.name}}</div>
            </flexbox-item>
        </flexbox>
        <center-list :center-list="centerList" :title-option="titleOption"></center-list>
    </div>
</template>
<script>
import {
    Flexbox,
    FlexboxItem
} from 'vuxComponents/flexbox';
import centerListComponent from '../components/centerListComponent.vue';
import centerAction from '../vuex/actions/centerAction';
import centerGetter from '../vuex/getters/centerGetter';
export default {
    components: {
        Flexbox,
        FlexboxItem,
        "center-list": centerListComponent,
        // Spinner,
    },
    data() {
        return {
            sports: [{
                type: "football",
                name: "A"
            }, {
                type: "basketball",
                name: "B"
            }, {
                type: "pingpang",
                name: "C"
            }, {
                type: "swim",
                name: "D"
            }],
            titleOption: {
                title: 'Arrangement',
                more: 'See More',
                link: {
                    path: '/centerlist'
                }
            }
        }
    },
    created() {
        this.getCenterList(0).then(function() {
            console.log('center List加载完成:@centerListView');
        }, function() {

        });
    },
    vuex: {
        getters: {
            centerList: centerGetter.getCenterList
        },
        actions: {
            getCenterList: centerAction.getCenterList
        }
    }
}
</script>
<style lang="sass" scoped>
.sports {
    width: 100%;
    height: auto;
    background-color: rgba(200, 200, 200, 0.5);
    .sport {
        padding-top: 15px;
        text-align: center;
        font-size: 20px;
    }
}
</style>
